{include file="$header"}
<div class="mk-personal">
    <mk-personal-public></mk-personal-public>
    <el-card class="box-card mk-personal-content">
        <div slot="header" class="clearfix">
            <span>{:lang("Personal Center")}</span> 
            <el-link style="float: right;" :href="index_url('user/set')" :underline="false">
                <el-button style="float: right;" type="success" icon="el-icon-edit" size="mini">{:lang('Account setup')}</el-button>
            </el-link>
        </div>
        <el-row style="margin-bottom: 25px;">
            <el-col :md="6" :sm="6" :xs="4">
                <el-avatar :size="150" :src="domain + userInfo.cover">{{userInfo.cover == "" ? userInfo.nickname : ''}}</el-avatar>
            </el-col>
            <el-col :md="18" :sm="18" :xs="24">
                <div class="ui-content">
                    <h4><el-link type="primary" :underline="false" :href="index_url('user/set')">{$userInfo['account']}</el-link></h4>
                    <p><el-link type="primary" :underline="false" :href="index_url('user/set')">{$userInfo['describe']}</el-link></p>
                    <div style="margin-top:15px;">
                        <table style="width: 100%;">
                            <tbody>
                                <tr>
                                    <th>UID</th>
                                    <td>{$userInfo['id']}</td>
                                    <th>Lv</th>
                                    <td>
                                        <el-tooltip content="{:lang('The level is upgraded according to the membership points')}" placement="top">
                                            <el-link type="primary" :underline="false">{$userInfo['group_title']}</el-link>
                                        </el-tooltip>
                                    </td>
                                </tr>
                                <tr>
                                    <th>{:lang('integral')}</th>
                                    <td>
                                        <el-tooltip content="{:lang('View points log')}" placement="top">
                                            <el-link
                                                type="primary" 
                                                :underline="false" 
                                                :href="index_url('user/integralLog')">
                                                {$userInfo['now_integral']}
                                            </el-link>
                                        </el-tooltip>
                                    </td>
                                    <th>{:lang('balance')}</th>
                                    <td>
                                        <el-tooltip effect="dark" content="{:lang('Check my bill')}" placement="top">
                                            <el-link
                                                type="primary" 
                                                :underline="false" 
                                                :href="index_url('user/balanceLog')">
                                                {$userInfo['balance']}
                                            </el-link>
                                        </el-tooltip>
                                    </td>
                                </tr>
                                <tr>
                                    <th>{:lang('Last login')}</th>
                                    <td>{$userInfo['login_time']}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row class="mk-personal-dashboard">
            {volist name="dashboard" id="vo"}
            <el-col :md="8" :sm="12" :xs="12">
                <a :href="index_url('{$vo.url}')">
                    <div class="counter-item">
                        <i class="{$vo.icon}" style="color:{$vo.color}"></i>
                        <h4>{$vo.number}</h4>
                        <p>{:lang($vo.title)}</p>
                    </div>
                </a>
            </el-col>
            {/volist}
        </el-row>
    </el-card>
</div>
{include file="$component" /}
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {}
        },
    });
</script>
{include file="$footer" /}